import { useEffect, useRef } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Button } from "@tarojs/components";
import HistogramChart from "../../components/HistogramChart";
import LineChart from "../../components/LineChart";
import { AtGrid } from "taro-ui"
import "./index.scss";

export default () => {
    const echartRef = useRef();
    const AtGriDataList = [
        {
            image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
            value: '日报'
        },
        {
            image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
            value: '周报'
        },
        {
            image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
            value: '月报'
        },
        {
            image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
            value: '新品首发'
        },
    ]
    const data = [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 },
    ];
    const dataLine = [
        {
            date: "2017-06-05",
            value: 116,
        },
        {
            date: "2017-06-06",
            value: 129,
        },
        {
            date: "2017-06-07",
            value: 135,
        },
        {
            date: "2017-06-08",
            value: 86,
        },
        {
            date: "2017-06-09",
            value: 73,
        },
        {
            date: "2017-06-10",
            value: 85,
        },
        {
            date: "2017-06-11",
            value: 73,
        },
        {
            date: "2017-06-12",
            value: 68,
        },
        {
            date: "2017-06-13",
            value: 92,
        },
        {
            date: "2017-06-14",
            value: 130,
        },
        {
            date: "2017-06-15",
            value: 245,
        },
        {
            date: "2017-06-16",
            value: 139,
        },
        {
            date: "2017-06-17",
            value: 115,
        },
        {
            date: "2017-06-18",
            value: 111,
        },
        {
            date: "2017-06-19",
            value: 309,
        },
        {
            date: "2017-06-20",
            value: 206,
        },
        {
            date: "2017-06-21",
            value: 137,
        },
        {
            date: "2017-06-22",
            value: 128,
        },
        {
            date: "2017-06-23",
            value: 85,
        },
        {
            date: "2017-06-24",
            value: 94,
        },
        {
            date: "2017-06-25",
            value: 71,
        },
        {
            date: "2017-06-26",
            value: 106,
        },
        {
            date: "2017-06-27",
            value: 84,
        },
        {
            date: "2017-06-28",
            value: 93,
        },
        {
            date: "2017-06-29",
            value: 85,
        },
        {
            date: "2017-06-30",
            value: 73,
        },
        {
            date: "2017-07-01",
            value: 83,
        },
        {
            date: "2017-07-02",
            value: 125,
        },
        {
            date: "2017-07-03",
            value: 107,
        },
        {
            date: "2017-07-04",
            value: 82,
        },
        {
            date: "2017-07-05",
            value: 44,
        },
        {
            date: "2017-07-06",
            value: 72,
        },
        {
            date: "2017-07-07",
            value: 106,
        },
        {
            date: "2017-07-08",
            value: 107,
        },
        {
            date: "2017-07-09",
            value: 66,
        },
        {
            date: "2017-07-10",
            value: 91,
        },
        {
            date: "2017-07-11",
            value: 92,
        },
        {
            date: "2017-07-12",
            value: 113,
        },
        {
            date: "2017-07-13",
            value: 107,
        },
        {
            date: "2017-07-14",
            value: 131,
        },
        {
            date: "2017-07-15",
            value: 111,
        },
        {
            date: "2017-07-16",
            value: 64,
        },
        {
            date: "2017-07-17",
            value: 69,
        },
        {
            date: "2017-07-18",
            value: 88,
        },
        {
            date: "2017-07-19",
            value: 77,
        },
        {
            date: "2017-07-20",
            value: 83,
        },
        {
            date: "2017-07-21",
            value: 111,
        },
        {
            date: "2017-07-22",
            value: 57,
        },
        {
            date: "2017-07-23",
            value: 55,
        },
        {
            date: "2017-07-24",
            value: 60,
        },
    ];
    const config01 = {
        id: "confi01",
        data,
        xField: "genre",
        yField: "sold",
        color: "#2FC25B",
    };
    const config02 = {
        id: "confi02",
        data: dataLine,
        xField: "date",
        yField: "value",
        color: "#2FC25B",
    };

    return (
        <View className='container'>
            <AtGrid data={
                AtGriDataList
            } />
            <View className="title">待处理工作</View>
            <View className="ticketContent">
                <View onClick={() => goToContract('reviewer')}>
                    <View className="status">待我审批</View>
                    <View className="count">9</View>
                </View>
                <View onClick={() => goToContract('creator')}>
                    <View className="status">我发起的</View>
                    <View className="count feedBackCount">2</View>
                </View>
            </View>
            <View className="title">工作统计</View>
            <HistogramChart {...config01}></HistogramChart>
            <View className="title">折线图</View>
            <LineChart {...config02}></LineChart>

        </View>
    );
};
